---
title: NavigableDialog
summary: "The Navigable Dialog is a multi-step modal component that provides a consistent way to display content with navigation between different sections."
---
import { NavigableDialogExample } from "./navigable-dialog.example";

## Overview

The Navigable Dialog is a multi-step modal component that provides a consistent way to display content with navigation between different sections. It’s built on top of the `DialogContainer` component, with additional navigation capabilities.

## Usage

```tsx
<NavigableDialogRoot isOpen={isOpen} onOpenChange={setIsOpen}>
  <NavigableDialogHeader
    title="Example Dialog"
    subTitle="Optional subtitle text"
  />
  
  <NavigableDialogBody>
    <NavigableDialogNav
      items={[
        { id: "general", label: "General", icon: Book2 },
        { id: "security", label: "Security", icon: Key },
      ]}
    />
    <NavigableDialogContent
      items={[
        {
          id: "general",
          content: <div>General settings content</div>
        },
        {
          id: "security",
          content: <div>Security settings content</div>
        },
      ]}
    />
  </NavigableDialogBody>

  <NavigableDialogFooter>
    <Button>Save Changes</Button>
  </NavigableDialogFooter>
</NavigableDialogRoot>
```

### Basic Example

<NavigableDialogExample />

## Variants

The component accepts all standard DialogContainer props.

## Features

- Multi-step navigation with sidebar
- Icon support for navigation items
- Accessible modal implementation
- State management between steps
- Customizable styling for each section
- Full keyboard-navigation support
- Responsive design
## Props

### NavigableDialogRoot

| Prop           | Type                    | Default | Description                                    |
|----------------|-------------------------|---------|------------------------------------------------|
| isOpen         | boolean                | -       | Controls the open state of the dialog          |
| onOpenChange   | (value: boolean) => void | -     | Callback when the open state changes           |
| dialogClassName | string                | -       | Additional classes for the dialog container     |
| preventAutoFocus | boolean              | true    | Whether to prevent auto-focus on open          |
| children       | ReactNode              | -       | The content to display in the dialog           |

### NavigableDialogNav

| Prop    | Type                                      | Default | Description                          |
|---------|-------------------------------------------|---------|--------------------------------------|
| items   | `{ id: string; label: ReactNode; icon?: FC }[]` | -   | Navigation items configuration        |
| className | string                                  | -       | Additional classes for the navigation |
| onNavigate | (fromId: string) => boolean \| `Promise<boolean>`| - | Optional navigation validation     |
| initialSelectedId | string                          | -       | Initial active section ID            |
| disabledIds | string[]                             | -       | IDs of disabled navigation items      |

### NavigableDialogContent

| Prop    | Type                                   | Default | Description                          |
|---------|----------------------------------------|---------|--------------------------------------|
| items   | `{ id: string; content: ReactNode }[]`   | -       | Content items for each section       |
| className | string                               | -       | Additional classes for content area   |

### NavigableDialogHeader

| Prop     | Type   | Default | Description                    |
|----------|--------|---------|--------------------------------|
| title    | string | -       | The title of the dialog        |
| subTitle | string | -       | Optional subtitle for the dialog|

## Structure

The NavigableDialog is composed of several components that work together:

1. **NavigableDialogRoot** - The container component that manages dialog state
2. **NavigableDialogHeader** - Contains the title and optional subtitle
3. **NavigableDialogBody** - Wrapper for navigation and content
4. **NavigableDialogNav** - Sidebar navigation with icons and labels
5. **NavigableDialogContent** - The main content area that displays the active section
6. **NavigableDialogFooter** - Optional section for actions like buttons

## Styling

The component includes default styling with:

- Responsive layout with side navigation
- Smooth transitions between sections
- Icon support in navigation items
- Dark mode support
- Customizable through className props

## Accessibility

The NavigableDialog implements the following accessibility features:

- Full keyboard navigation support
- ARIA labels for navigation items
- Focus management between sections
- Screen reader announcements for section changes
- All the accessibility features from the base Dialog component 